<template>
  <div class="InfoCar" :style='[{backgroundImage: "url(" + CarList.bgImg + ")"},{boxShadow}]'>
    <div class="Info-tit">
      <img :src='CarList.src' alt="">
      <span class="aid">{{CarList.InfoTit}}</span>
    </div>
    <div class="Info-con" v-if="CarList.decide">
      <span v-for="(item, index) in CarList.InfoCon" :key="index">{{item}}</span>
    </div>
    <div class="Info-date" v-else>
      <div>2017niao0988</div>
      <div>1234566987</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoCar',
  props: ['CarListInfo'],
  data () {
    return {
      CarList: this.CarListInfo,
      boxShadow: this.CarListInfo.boxS
    }
  }
}
</script>

<style lang="stylus" scoped>
.InfoCar {
  position: relative;
  width: 5.42rem;
  height: 4.72rem;
  border-radius: 0.12rem;
  color: #fff;
}

.InfoCar .Info-tit {
  display: flex;
  align-items: center;
  height: .84rem;
  // padding: 0.3rem;
}

.InfoCar .Info-tit img {
  width: 0.38rem;
  height: 0.34rem;
  margin: 0.3rem;
}
// 病床号
.InfoCar .Info-con {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.InfoCar .Info-date {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.InfoCar .Info-con>span:nth-child(1) {
  font-size: 1.45rem;
}

.InfoCar .Info-con>span:nth-child(2) {
  font-size: 1.5rem;
}

.InfoCar .Info-con>span:nth-child(3) {
  font-size: 0.6rem;
}
// 时间显示
.InfoCar .Info-date>div{
  font-size: .4rem;
  padding: .2rem 0;
}
</style>
